import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Space, theme,Cascader } from 'antd';
import { options } from './options/studentClass';
import { StudentType, studentPost } from '../../api/student';
import ImgUpload from '../../components/ImgUpload';

const { Option } = Select;

const AdvancedSearchForm = () => {
  const { token } = theme.useToken();
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);

  const formStyle: React.CSSProperties = {
    maxWidth: 'none',
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 24,
  };


  const onFinish = (values: StudentType) => {
    console.log('Received values of form: ', values);
    studentPost(values)
  };

  return (
    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
      <Row gutter={24}>
        <Col span={12}>
            <Form.Item
              name='name'
              label='学员姓名'
              rules={[
                {
                  required: true,
                  message: '请输入姓名!',
                },
              ]}
            >
              <Input placeholder="placeholder" />
            </Form.Item>
        </Col>
        <Col span={12}>
            <Form.Item
              name='code'
              label='学籍号码'
              rules={[
                {
                  required: true,
                  message: '请输入学号!',
                },
              ]}
            >
              <Input placeholder="placeholder" />
            </Form.Item>
        </Col>

      </Row>
      <Row gutter={24}>
        <Col span={12}>
            <Form.Item
              name='stuClass'
              label='学生班级'
              rules={[
                {
                  required: true,
                  message: '请选择班级!',
                },
              ]}
            >
              <Cascader options={options}  placeholder="请选择班级" />
            </Form.Item>
        </Col>
        <Col span={12}>
            <Form.Item
              name='gender'
              label='学生性别'
              rules={[
                {
                  required: true,
                  message: '请输入学号!',
                },
              ]}
            >
              <Select
                style={{ width: 120 }}
                options={[
                  { value: '女', label: '女' },
                  { value: '男', label: '男' },
                ]}
              />
            </Form.Item>
        </Col>

      </Row>
      <Row gutter={24}>
        <Col span={12}>
            <Form.Item
              name='avatar'
              label='学籍照片'
              rules={[
                {
                  required: true,
                  message: '请上传学籍照片',
                },
              ]}
            >
              <ImgUpload/>
            </Form.Item>
        </Col>

      </Row>
      <div style={{ textAlign: 'right' }}>
        <Space size="small">
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
          
        </Space>
      </div>
    </Form>
  );
};

const StudentPublic: React.FC = () => {

  return (
    <>
      <AdvancedSearchForm />
    </>
  );
};

export default StudentPublic;